﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Simple.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="content">
        <%
            using (Html.BeginForm("UserRegister", "Users"))
            {%>
        <div class="reg_login_box clear">
            <div class="main_reg">
                <h1 class="yahei">
                    新用户注册</h1>
                <div class="reg_form">
                    <div class="item" id="DivUserEmail">
                        <span>邮箱：</span>
                        <input name="UserEmail" id="UserEmail" type="text" class="txt" onchange="CheckChange('UserEmail');" />
                        <div id="MsgUserEmail" class="note">
                            请输入您的常用email</div>
                    </div>
                    <div class="item" id="DivNickName">
                        <span>昵称：</span>
                        <input name="NickName" id="NickName" type="text" class="txt" onchange="CheckChange('NickName');" />
                        <div id="MsgNickName" class="note">
                            大家会用这样称呼你</div>
                    </div>
                    <div class="item">
                        <span>性别：</span><p>
                            <input type="radio" class="ck" checked="checked" value="boy" name="sex" />
                            男
                            <input type="radio" class="ck" value="girl" name="sex" />
                            女</p>
                    </div>
                    <div class="item" id="DivPwd">
                        <span>密码：</span><input name="Pwd" id="Pwd" type="password" class="txt" onchange="CheckChange('Pwd');" />
                        <div id="MsgPwd" class="note">
                            字母、数字或者符号</div>
                    </div>
                    <div class="item" id="DivRePwd">
                        <span>确认密码：</span><input id="RePwd" name="RePwd" type="password" class="txt" onchange="CheckChange('RePwd');" />
                        <div class="note" id="MsgRePwd">
                            再输入一次密码</div>
                    </div>
                    <div class="item" id="DivValidate">
                        <span>验证码：</span><input name="Validate" id="Validate" type="text" class="txt txt_yz"
                            onchange="CheckChange('Validate');" />
                        <p class="yzm">
                            <%
                string imgUrl = Url.Action("LoginValidateImage", "Public");%>
                            <img src="<%:imgUrl%>" style="cursor: pointer;" alt="换一张" onclick="this.src=this.src+'?'" /></p>
                    </div>
                    <div class="item">
                        <span></span>
                        <p>
                            <input type="checkbox" checked="checked" name="register_agreement">
                            <a href="#">我已看过并同意《要运动网络服务使用协议》</a></p>
                    </div>
                    <div class="item">
                        <span></span>
                        <input name="" type="submit" value="轻松注册" class="btn yahei" onclick="return ClickSubmit();" /></div>
                </div>
            </div>
            <div class="side_login">
                <div class="login_link_note">
                    已经有帐号？请直接登录</div>
                <div class="login_link yahei">
                    <a href="#">登录</a></div>
                <div class="other_login_note">
                    您也可以用以下方式登录</div>
                <ul class="other_login">
                    <li class="weibo"><a href="#" title="微博登录"></a></li>
                    <li class="qq"><a href="#" title="QQ登录"></a></li>
                </ul>
            </div>
        </div>
        <%
            }%>
    </div>
    <script type="text/javascript">
        function CheckRegister() {
            this.CheckEmail = function () {
                $("#MsgUserEmail").remove();
                var message = "";
                var b = false;

                if ($("#UserEmail").val().search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) == -1) {
                    message = "输入Email格式错误";
                }
                else {
                    this.SetClassAndMessage("UserEmail", "检查中。。。", b);
                    var result = $.ajax({
                        url: "/Ajax/CheckEmail",
                        data: "email=" + $("#UserEmail").val(),
                        type: "POST",
                        async: false,
                        cache: false
                    }).responseText;
                    $("#MsgUserEmail").remove();
                    if (result == "2") {
                        b = true;
                    }
                    else {
                        message = "Email已经被注册";
                    }
                }
                this.SetClassAndMessage("UserEmail", message, b);
                return b;
            }

            this.CheckPwd = function () {
                $("#MsgPwd").remove();
                var message = "";
                var b = false;
                if ($("#Pwd").val() == "" || $("#Pwd").val().length < 6 || $("#Pwd").val().length > 15) {
                    message = "密码必须填写，并且长度需在6到15之间";
                }
                else {
                    message = "密码输入正确";
                    b = true;
                }
                this.SetClassAndMessage("Pwd", message, b);
                return b;
            }

            this.CheckRePwd = function () {
                $("#MsgRePwd").remove();
                var message = "";
                var b = false;
                if ($("#RePwd").val() == "") {
                    message = "密码验证必须输入";
                } else if ($("#RePwd").val() != $("#Pwd").val()) {
                    message = "重复密码必须和密码输入一致";
                } else {
                    message = "重复密码输入正确";
                    b = true;
                }
                this.SetClassAndMessage("RePwd", message, b);
                return b;
            }

            this.CheckNickName = function () {
                $("#MsgNickName").remove();
                var message = "";
                var b = false;
                if ($("#NickName").val() == "") {
                    message = "请填写昵称";
                }
                else {
                    this.SetClassAndMessage("NickName", "检查中。。。", b);
                    var result = $.ajax({
                        url: "/Ajax/CheckNickName",
                        data: "nickName=" + $("#NickName").val(),
                        type: "POST",
                        async: false,
                        cache: false
                    }).responseText;
                }

                $("#MsgNickName").remove();
                if (result == "2") {
                    b = true;
                } else {
                    message = "该昵称已被使用";
                }
                this.SetClassAndMessage("NickName", message, b);
                return b;
            }

            this.CheckValidateImg = function () {
                $("#MsgValidate").remove();
                var message = "";
                var b = false;
                if ($("#Validate").val() == "") {
                    message = "请输入验证码";
                } else {
                    var result = $.ajax({
                        url: "/Ajax/CheckValidate",
                        data: "validate=" + $("#Validate").val(),
                        type: "POST",
                        async: false,
                        cache: false
                    }).responseText;
                    if (result == "1") {
                        message = "验证码输入不正确";
                    }
                    else {
                        b = true;
                    }
                }
                this.SetClassAndMessage("Validate", message, b);
                return b;
            }

            this.SetClassAndMessage = function (key, message, b) {
                if (b) {
                    $("#Div" + key).append("<div id=\"Msg" + key + "\" class=\"note correct\"><i class=\"icon\"></i></div>");
                }
                else {
                    $("#Div" + key).append("<div id=\"Msg" + key + "\" class=\"note error\">" + message + "</div>");
                }
            }
        }

        function CheckChange(key) {
            var checkRegister = new CheckRegister;
            if (key == "UserEmail") {
                checkRegister.CheckEmail();
            }
            if (key == "Pwd") {
                checkRegister.CheckPwd();
            }
            if (key == "RePwd") {
                checkRegister.CheckRePwd();
            }
            if (key == "NickName") {
                checkRegister.CheckNickName();
            }
            if (key == "Validate") {
                checkRegister.CheckValidateImg();
            }
        }

        function ClickSubmit() {
            var b, b1, b2, b3, b4;
            var checkRegister = new CheckRegister;
            b = checkRegister.CheckEmail();
            b1 = checkRegister.CheckNickName();
            b2 = checkRegister.CheckPwd();
            b3 = checkRegister.CheckRePwd();
            b4 = checkRegister.CheckValidateImg();

            if (b && b1 && b2 && b3 && b4) {
                return true;
            }
            else {
                return false;
            }
        }
    </script>
</asp:Content>
